<template>
  <div class="my-reservation-add maxW">
    <div class="crumbs-link my-reservation-add-link">
      <em @click="goback()">我的预约</em>
      <strong><i>></i>新建预约</strong>
    </div>
    <div class="my-reservation-add-cont">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="直播时间" class="reservation-time" required>
          <el-form-item label-width="0" class="input-css" prop="liveTime">
            <el-select @change="liveDayTime" v-model="ruleForm.liveTime" placeholder="请选择">
              <el-option label="自定义时间" :value="1"></el-option>
              <el-option label="节次" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="0" prop="date">
            <el-date-picker v-model="ruleForm.date" type="date" value-format="yyyy-MM-dd" :picker-options='pickerOptions' placeholder="直播时间" style="width: 100%">
            </el-date-picker>
          </el-form-item>
          <el-form-item label-width="0" prop="Livesection" v-if='dayTime'>
            <el-select @change="timeSectionChange" v-model="ruleForm.Livesection" placeholder="请选择">
              <el-option v-for="(item, index) in nodeTime" :label="`第${item.section}节 ${item.start_time} - ${item.end_time}`" :value="item.section" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="0" class="Livesection" v-else>
            <el-col :span="11">
              <el-form-item prop="start_time">
                <el-time-select placeholder="起始时间" v-model="ruleForm.start_time" :picker-options="{start: '00:00',step: '00:05',end: '23:55',minTime:(new Date(ruleForm.date).toDateString() == new Date().toDateString())?newDate:'00:00'}"></el-time-select>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="end_time">
                <el-time-select placeholder="结束时间" v-model="ruleForm.end_time" :picker-options="{start: '00:00',step: '00:05',end: '23:55',minTime:ruleForm.start_time}"></el-time-select>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-form-item>
        <el-form-item label="公开课名称" prop="name" class="input-gab">
          <el-input v-model.trim="ruleForm.name" placeholder="最多可输入20个字" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label-width="0" class="input-css">
          <el-form-item prop="teacher" label='授课教师'>
            <el-input v-model="ruleForm.teacher" maxlength="20" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="直播设备" prop="recorder_id">
            <el-select v-model="ruleForm.recorder_id" placeholder="请选择">
              <el-option v-for="(item, index) in recorderData" :label="item.name" :value="item.id" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item label-width="0" class="input-css">
          <el-form-item prop="school" label='所属学校'>
            <el-input v-model="$store.getters.userInfo.platform_name" maxlength="20" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="学段" prop="study_id">
            <el-select v-model="ruleForm.study_id" @change="getOrgLevel2" placeholder="请选择">
              <el-option v-for="(item, index) in orgLevel2" :label="item.name" :value="item.id" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item label-width="0" required class="input-css">
          <el-form-item label="年级" prop="grade_id">
            <el-select v-model="ruleForm.grade_id" @change="getSubject" placeholder="请选择">
              <el-option v-for="(item, index) in orgLevel3" :label="item.name" :value="item.id" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="科目" prop="subject_id">
            <el-select v-model="ruleForm.subject_id" placeholder="请选择">
              <el-option v-for="(item, index) in orgSubject" :label="item.name" :value="item.id" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item label-width="0" required class="input-css">
          <el-form-item prop="teaching_type" label='课型'>
            <el-select v-model="ruleForm.teaching_type" placeholder="选择课型">
              <el-option label="新授课" :value="1"></el-option>
              <el-option label="复习课" :value="2"></el-option>
              <el-option label="评讲课" :value="3"></el-option>
              <el-option label="主题活动课" :value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item label="课程简介" prop="profile" class="input-css profileBox">
          <el-input type="textarea" :rows="5" resize="none" v-model.trim="ruleForm.profile" maxlength="200" placeholder="请输入课程简介,不超200字">
          </el-input>
          <span class="numberWord"><i>{{ ruleForm.profile.length }}</i>/200</span>
        </el-form-item>
        <el-form-item label='是否录制' prop="is_record" class="input-txt">
          <el-radio-group v-model="ruleForm.is_record">
            <el-radio :label="1">录制</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="buttonCSS" label-width="0">
          <el-button @click="goback()" plain>取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      newDate:(new Date().getHours() +':'+ new Date().getMinutes() +':'+ new Date().getSeconds()),
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      ruleForm: {
        order_type: 1,
        name: "", //公开课名称
        teacher: "",
        date: "",
        start_time: "",
        section: "",
        end_time: "",
        Livesection: "",
        recorder_id: "", //直播设备
        school: "",
        study_id: "",
        grade_id: "",
        subject_id: "", //科目
        teaching_type: "",
        profile: "", //课程简介
        is_record: 1,
        liveTime:1,
      },
      rules: {
        liveTime: [
          { required: true, message: "请选择时间類型", trigger: "change" }
        ],
        Livesection: [
          { required: true, message: "请选择时间", trigger: "change" }
        ],
        date: [
          { type: "string",required: true, message: "请选择日期", trigger: "change" }
        ],
        start_time: [
          { type: "string",required: true, message: "请选择开始时间", trigger: "change" }
        ],
        end_time: [
          { type: "string",required: true, message: "请选择结束时间", trigger: "change" }
        ],
        name: [
          { required: true, message: "请输入公开课名称", trigger: "blur" }
        ],
        recorder_id: [
          { required: true, message: "请选择直播设备", trigger: "change" }
        ],
        study_id: [
          { required: true, message: "请选择学段", trigger: "change" }
        ],
        grade_id: [
          { required: true, message: "请选择年级", trigger: "change" }
        ],
        subject_id: [
          { required: true, message: "请选择科目", trigger: "change" }
        ],
        teaching_type: [
          { required: true, message: "请选择课型", trigger: "change" }
        ]
      },
      dayTime: false,
      nodeTime: [],
      recorderData: [], //直播设备
      orgLevel2: [], //学段
      orgLevel3: [], //年级
      orgSubject: [], //科目
    };
  },
  created() {
    this.getRecorder();
    this.getBabelDate();
    this.getOrgLevel2();
  },
  // watch: {
  //   "ruleForm.type": {
  //     handler(b) {
  //       if (parseInt(b) === 1) {
  //         this.ruleForm.date = timestampToTime().substr(0, 10);
  //         this.ruleForm.start_time = timestampToTime().substr(11, 8);
  //         this.ruleForm.end_time = "";
  //       } else {
  //         this.ruleForm.date = timestampToTime().substr(0, 10);
  //         this.ruleForm.start_time = "";
  //         this.ruleForm.end_time = "";
  //       }
  //     }
  //   }
  // },
  methods: {
    goback() {
      this.$router.back(-1);
    },
    // 提交表单需要的数据
    saveLive() {
      var params = {
        name: this.ruleForm.name,
        teaching_type: this.ruleForm.teaching_type,
        study_section_id: this.ruleForm.study_id,
        subject_id: this.ruleForm.subject_id,
        recorder_id: this.ruleForm.recorder_id,
        start_time: this.ruleForm.date + " " + this.ruleForm.start_time,
        end_time: this.ruleForm.date + " " + this.ruleForm.end_time,
        is_record: this.ruleForm.is_record,
        profile: this.ruleForm.profile,
        is_order: this.ruleForm.is_record,
        grade_id: this.ruleForm.grade_id,
        order_type: this.ruleForm.order_type
      };
      let success = data => {
        this.$message.success(data.msg);
        setTimeout(() => {
          this.$router.push({path: '/course2/reservation'})
        }, 1000);
      };
      let fail = data => {
        let msg = "";
        if (typeof data.msg == "object") {
          for (var i = 0; i <= data.msg.length - 1; i++) {
            msg +=
              '<p style="line-height:20px;color:#f56c6c">' +
              data.msg[i] +
              "</p>";
          }
        } else {
          msg = data.msg;
        }
        this.messageObj = this.$message({
          duration: 5000,
          type: "warning",
          dangerouslyUseHTMLString: true,
          message: msg
        });
      };
      this.$ajax.post("api/teachingschedule/teaching_schedule", params, {
        func: { success: success, fail: fail }
      });
    },
    //直播时间--自定义时间--节次
    getTimeset() {
      let success = res => {
        let data = res.data;
        this.nodeTime = data;
      };
      this.$ajax({
        url: "/api/school/timeset ",
        method: "get",
        func: {
          success: success
        }
      });
    },
    //自定义时间
    liveDayTime() {
      if (parseInt(this.ruleForm.liveTime) === 1) {
        this.dayTime = true;
        this.ruleForm.Livesection = "";
      } else {
        this.getTimeset();
        this.ruleForm.start_time = "";
        this.ruleForm.end_time = "";
        this.dayTime = false;
      }
      this.ruleForm.liveTime == 1
        ? (this.dayTime = false)
        : (this.dayTime = true);
    },

    //获取直播设备
    getRecorder() {
      let success = data => {
        this.recorderData = data.data;
      };
      this.$ajax.get("api/recorder/recorder_list", {
        params: this.recorderParam,
        func: { success: success }
      });
    },
    //获取store里的老师和学校数据
    getBabelDate() {
      let userInfo = this.$store.getters.userInfo;
      this.ruleForm.teacher = userInfo.name;
      this.ruleForm.school = userInfo.schooldo;
    },
    //获取学段
    getOrgLevel2() {
      let success = res => {
        let data = res.data;
        this.orgLevel2 = data;
        if (this.orgLevel2[0].id) {
          this.orgLevel2[0].study_id = this.orgLevel2[0].id;
        }
        this.getOrgLevel3();
      };
      this.$ajax({
        url: "api/org/org",
        method: "get",
        params: {
          level: 2,
          pid: 1,
          direction: "balance"
        },
        func: {
          success: success
        }
      });
    },
    //获取年级
    getOrgLevel3() {
      let success = res => {
        let data = res.data;
        if (data.length === 0) {
          return;
        }
        this.orgLevel3 = data;
        if (this.orgLevel3[0].id) {
          this.ruleForm.grade_id = this.orgLevel3[0].id;
        }
        this.getSubject();
      };
      this.$ajax({
        url: "api/org/org",
        method: "get",
        params: {
          level: 3,
          pid: this.ruleForm.study_id,
          direction: "balance"
        },
        func: {
          success: success
        }
      });
    },
    //科目
    getSubject() {
      let success = res => {
        let data = res.data;
        this.orgSubject = data;
        if (this.orgSubject[0].id) {
          this.ruleForm.subject_id = this.orgSubject[0].id;
        }
      };
      this.$ajax({
        url: "api/cate/subject",
        method: "get",
        params: {
          type: 2,
          org_id: this.ruleForm.grade_id,
          status: 1
        },
        func: {
          success: success
        }
      });
    },
    timeSectionChange(value) {
      this.ruleForm.start_time = this.nodeTime[value - 1].start_time;
      this.ruleForm.end_time = this.nodeTime[value - 1].end_time;
    },
    //表单验证
    submitForm(formName) {
      if (this.ruleForm.end_time <= this.ruleForm.start_time) {
        this.$message.error("开始时间不能大于结束时间");
        return;
      }
      this.$refs[formName].validate(valid => {
        if (valid) {
            this.saveLive();
        } else {
          return false;
        }
      });
    },
  }
};
</script>

<style lang="scss">

.Livesection {
  .el-form-item__content {
    width: 500px;
  }
}
.el-form-item__content {
  .is-disabled {
    .el-input__inner {
      background-color: #fff;
			color:#606266;
    }
  }
}

.profileBox {
  position: relative;
  .el-textarea {
    width: 86%;
  }
  .numberWord {
    position: absolute;
    bottom: 0;
    right: 15%;
  }
}
</style>